<template>
	<view class="container">
		<view style="
		 background: linear-gradient(to bottom,#4A9BFF 0%,#3988FD 50%, #1262E4 100%);
		height: 194px;
		padding-top: 10px;
		padding-left: 10px;">
			<uni-icons type="left" size="20" color="#fff" @click="goToBack"></uni-icons>
			<text style="color: #fff; font-size: 16px;font-weight: bold; margin-left: 130px;">收支明细</text>
			<view class="top">
				<view class="left-section">
					<text>当前现金余额(元)</text>
					<text class="money">1500</text>
					<button style="
					  margin-top: 10px;
					  color: #ffffff;
					  background-color: #FF6433;
					  padding: 0; 
					  font-size: 14px; 
					  border: none; 
					  border-radius: 20px; 
					  cursor: pointer; 
					  height: 40px; 
					  width: 100px;
					  line-height: 40px;  
					  text-align: center; 
					" size="default" @click="goToWithdrawal">提现</button>
				</view>
				<view class="divider"></view>
				<view class="right-section">
					<text>累计收入(元) : &nbsp;1700元</text>
					<text>累计提现(元) : &nbsp;200元</text>
				</view>
			</view>

		</view>
		

		<view class="list">
			<uni-list border-full>
				<uni-list-item title="收支明细" />
			</uni-list>
			<uni-list border-full>
				<uni-list-item title="XX车辆清洗、抛光打蜡服务" note="核销时间:2022-10-121109">
					<template v-slot:footer>
						<text class="tips">+ 50.00</text>
					</template>
				</uni-list-item>
				<uni-list-item title="XX车辆清洗、抛光打蜡服务" note="核销时间:2022-10-121109">
					<template v-slot:footer>
						<text class="tips">+ 50.00</text>
					</template>
				</uni-list-item>
				<uni-list-item title="XX车辆清洗、抛光打蜡服务" note="核销时间:2022-10-121109">
					<template v-slot:footer>
						<text class="tips">+ 50.00</text>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goToBack() {
				uni.navigateBack()
			},
			goToWithdrawal() {
				uni.navigateTo({
					url: '/pages/moneyDetail/requestWithdrawal/requestWithdrawal'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #e9e9eb;
	}



	.top {
		padding: 0 10px;
		height: 170px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e0e0e0;
		// background: linear-gradient(to bottom, #3887FC, #2979ff);
		/* 从上到下的渐变 */
		font-size: 14px;
	}

	.left-section,
	.right-section {
		flex: 1;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;

	}

	.left-section .money {
		text-align: left;
		font-size: 18px;
		font-weight: bold;
	}


	.left-section {
		padding-right: 10px;
	}




	.right-section {
		padding-left: 10px;
	}

	.right-section text:nth-child(1) {
		padding-bottom: 20px;
	}

	.divider {
		width: 1px;
		background-color: #e0e0e0;
		height: 80%;
	}

	/* 收支明细样式*/
	// .list{
	// 	margin: 0 10px;
	// 	margin-top: -10px;
	// 	border-radius: 50px;
	// }
	.tips {
		font-size: 14px;
		color: #FF6433;
		font-weight: bold;
	}
</style>